<template>
  <div class="to">
    <h1>toRef</h1>
    <p>可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接</p>
    <button @click="changeToRef">change</button>
    <p>直接定义的object:{{obj}}</p>
    <br>
    <p>通过reactive定义的对象{{obj1}}</p>
    <button @click="changeToRef1">change</button>
    <hr>

    <h1>toRefs</h1>
    <p>将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。</p>
    <button @click="changeToRefs">change</button>
    <p>foo:{{foo}},bar:{{bar}}</p>
    <hr>
    <h1>toRaw</h1>
    <p>返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”，可用于临时读取数据而无需承担代理访问/跟踪的开销，也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用</p>
    <button @click="changeToRaw">change响应式</button>
    <button @click="changeToRaw1">change原始对象</button>
    <p>raw:{{raw}},toRaw:{{ToRaw}}</p>
    <br>
  </div>
</template>
<script lang="ts" setup>
import { toRef, reactive, toRefs, toRaw } from "vue";
// toRef
// 原始对象直接定义=>  值变了 视图未更新
// 原始对象通过reactive定义=>  值变了 视图更新

let obj = {
  foo: 1,
  bar: 2,
};
let obj1 = reactive({
  foo: 1,
  bar: 2,
});

let state = toRef(obj, "bar");
let state1 = toRef(obj1, "bar");

const changeToRef = () => {
  state.value++;
  console.log("原始对象-----", obj);
  console.log("引用对象-----", state);
};

const changeToRef1 = () => {
  state1.value++;
  console.log("原始对象-----", obj1);
  console.log("引用对象-----", state1);
};
// toRefs
// toRef的进阶模式
let { foo, bar } = toRefs(obj1);
const changeToRefs = () => {
  foo.value++;
  bar.value++;
};
//
// toRaw
// 将向响应式对象转换为 普通object
let raw = reactive({
  a: 1,
  b: 2,
});
let ToRaw = toRaw(raw);
const changeToRaw = () => {
  raw.a++;
};
const changeToRaw1 = () => {
  ToRaw.b++;
  console.log("原始对象-----", raw);
  console.log("引用对象-----", ToRaw);
};
</script>

<style lang="less" scoped>
div {
  font-size: 20px;
}
</style>
